<template>
	<view class="box_My">
		<view class="My_top">
			<view class="My_nametx">
				<view class="My_touxiang"></view>
				<view style="font-weight: bold; font-size: 40rpx; color: #222222;">张曼玉</view>
				<view style="font-weight: bold; font-size: 24rpx; color: #222222;">ZY000046</view>
			</view>

			<view class="box_sTiScang">
				<view class="box_Xmleft" style="text-align: center;" @click="handleButtonClick">
					<view>项目</view>
					<view>3</view>
				</view>
				<view @click="naviaskaquestion" class="box_Xmcenter" style="text-align: center;">
					<view>提问</view>
					<view>5</view>
				</view>
				<view @click="navigateToFavorites" class="box_Xmright" style="text-align: center;">
					<view>收藏</view>
					<view>3</view>
				</view>
			</view>
		</view>

		<view class="box_bottom">
			<view>
				<view style="float: left;">公司</view>
				<view style="float: right;">金华喆云科技有限公司</view>
			</view>
			<view>
				<view style="float: left;">部门</view>
				<view style="float: right;">技术部</view>
			</view>
			<view>
				<view style="float: left;">版本</view>
				<view style="float: right;">V1.0.0</view>
			</view>
			<view @click="Gochangepassword">
				<view style="float: left;">修改密码</view>
				<view style="float: right;">></view>
			</view>
		</view>

		<view class="box_TCDL" @click="logout">退出登录</view>
	</view>
</template>

<script>
	import {
		defineComponent
	} from 'vue';

	export default defineComponent({
		setup() {
			// 处理点击“项目”按钮的逻辑
			const handleButtonClick = () => {
				console.log('点击了项目');
				uni.navigateTo({
					url: '/pages/project/project' // 跳转到目标页面
				});
			};

			// 处理点击“提问”按钮的逻辑
			const naviaskaquestion = () => {
				console.log('点击了提问');
				uni.navigateTo({
					url: '/pages/askaquestion/askaquestion' // 跳转到目标页面
				});
			};

			// 处理点击“收藏”按钮的逻辑
			const navigateToFavorites = () => {
				console.log('点击了收藏');
				uni.navigateTo({
					url: '/pages/Favorites/Favorites' // 跳转到目标页面
				});
			};

			// 处理点击“修改密码”按钮的逻辑
			const Gochangepassword = () => {
				console.log('点击了修改密码');
				uni.navigateTo({
					url: '/pages/ChangePassword/ChangePassword' // 跳转到目标页面
				});
			};

			// 退出登录逻辑
			const logout = () => {
				uni.showModal({
					title: '确认退出',
					content: '您确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户已退出登录');
							// 在这里处理退出登录逻辑，比如清除用户信息
							uni.redirectTo({
								url: '/pages/logon/logon' // 根据你的项目实际路径调整
							});
						} else if (res.cancel) {
							console.log('用户取消退出');
						}
					}
				});
			};

			// 返回需要暴露的响应式数据和方法
			return {
				handleButtonClick,
				naviaskaquestion,
				navigateToFavorites,
				Gochangepassword,
				logout
			};
		}
	});
</script>

<style lang="scss">
	.My_top {
		background-image: url('http://openapi.keyboardadmin.com:9001/KingdeeCommunity/bg@2x.png');
		background-size: 750rpx 460rpx;
		background-repeat: no-repeat;
		position: relative;
		height: 460rpx;
	}

	.My_touxiang {
		height: 172rpx;
		width: 172rpx;
		background-image: url('http://openapi.keyboardadmin.com:9001/KingdeeCommunity/touxiang@2x.png');
		background-size: 172rpx 172rpx;
		background-repeat: no-repeat;
	}

	.My_nametx {
		display: flex;
		align-items: center;
		flex-direction: column;
		height: 280rpx;
		justify-content: space-around;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.box_sTiScang {
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		width: 670rpx;
		height: 160rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		position: absolute;
		bottom: -400rpx;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		margin: auto;
	}

	.box_bottom {
		width: 608rpx;
		height: 480rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin: 0 auto;
		margin-top: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.box_TCDL {
		margin: 0 auto;
		margin-top: 55rpx;
		width: 400rpx;
		height: 88rpx;
		background: #4170FF;
		line-height: 88rpx;
		color: white;
		border-radius: 44rpx;
		text-align: center;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s;
	}
</style>